<template>
    <div class="header">
        <el-row>
          <el-col :span="3">
            <!-- logo -->
            <div class="logo" style="color: white">
              <el-image
                style="width: 50px; height: 50px;padding-right: 10px;"
                :src="logo_url"
                ></el-image>
              医美
            </div>
          </el-col>
          <el-col :span="3" v-for="(item, index) in menuList" :key="index" @click="selectItem(index)">
              <router-link :to="item.route" :style="{ color: selectedItem === index ? 'white' : 'black', textDecoration: 'none' }">
                  <e-icon :icon-name="item.icon"></e-icon>
                  <span style="font-size: 20px">{{item.titleName}}</span>            
              </router-link >
          </el-col>
          <el-col :span="3" style="float: right">
            <el-dropdown>
                  <span class="el-dropdown-link" style="z-index:200;color:white;">
                      个人中心<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>员工姓名：张三</el-dropdown-item>
                <el-dropdown-item command="quit">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
  name: 'myheader',
  data(){
    return{
      selectedItem: '',
      logo_url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      menuList:[
        {
            route:'/site',
            icon:'el-icon-monitor',
            titleName:'现场管理',
        },
        {
            route:'/vip',
            icon:'element-icons element-icon-31huiyuanqia',
            titleName:'会员中心',
        },
        {
            route:'/kucun',
            icon:'element-icons element-icon-cangkukucun',
            titleName:'库存中心',
        },
        {
            route:'/caiwu',
            icon:'element-icons element-icon-caiwufenxi',
            titleName:'财务中心',
        },
        {
            route:'/shuju',
            icon:'element-icons element-icon-shujuzhongxin',
            titleName:'数据中心',
        },
        {
            route:'/mendian',
            icon:'element-icons element-icon-mendian',
            titleName:'门店中心',
        }
      ]
    }
  },
  methods:{
    selectItem(index) {
      this.selectedItem = index;
      this.$emit('selectedItem', this.selectedItem);
    }
    
  },
  mounted(){
    
  }
}
</script>

<style scoped>
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.header{
  height: 60px;
  width: 100%;
  color: #333;
  background-color: #00BAAD;
  padding: 0;
}

</style>
